<!-- powerEdit -->
<template>
  <div class="powerEdit">
    <el-tabs v-model="active" v-loading="loading">
      <div v-if="!commiCacal && !powerCacal">请前往身份配置对应的策略配置</div>
      <el-tab-pane label="分润配置" name="commi" v-if="commiCacal">
        <commi
          :RoleId="RoleId"
          v-if="active == 'commi'"
          :IdentityId="IdentityId"
        ></commi>
      </el-tab-pane>
      <el-tab-pane label="权益配置" name="power" v-if="powerCacal">
        <el-tabs v-model="activeName" type="border-card">
          <el-tab-pane
            :label="item.label"
            :name="item.name"
            v-for="item of listCacal"
            :key="item.name"
          >
            <component
              :is="item.components"
              :RoleId="RoleId"
              v-if="activeName == item.name"
              :IdentityId="IdentityId"
            ></component>
          </el-tab-pane>
          <!-- <el-tab-pane label="达标津贴" name="promA">
            <standard-a
              :RoleId="RoleId"
              v-if="activeName == 'promA'"
              :IdentityId="IdentityId"
            ></standard-a>
          </el-tab-pane>
          <el-tab-pane label="达标奖励" name="promB">
            <standard-b
              :RoleId="RoleId"
              v-if="activeName == 'promB'"
              :IdentityId="IdentityId"
            ></standard-b>
          </el-tab-pane>
          <el-tab-pane label="销售津贴" name="sellB">
            <sell
              :RoleId="RoleId"
              v-if="activeName == 'sellB'"
              :IdentityId="IdentityId"
            ></sell>
          </el-tab-pane>
          <el-tab-pane label="管理津贴" name="qualiA">
            <promote-a
              :RoleId="RoleId"
              v-if="activeName == 'qualiA'"
              :IdentityId="IdentityId"
            ></promote-a>
          </el-tab-pane>
          <el-tab-pane label="推广奖励" name="qualib">
            <promote-b
              :RoleId="RoleId"
              v-if="activeName == 'qualib'"
              :IdentityId="IdentityId"
            ></promote-b>
          </el-tab-pane> -->
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import commi from './commi.vue'
import acti from './acti.vue'
import standardA from './standardA.vue'
import standardB from './standardB.vue'
import sell from './sell.vue'
import promoteA from './promoteA.vue'
import promoteB from './promoteB.vue'
import promoAllow from './promoAllow.vue'

import { GetCorrList } from '@/api/system/user'

export default {
  //import引入的组件需要注入到对象中才能使用
  name: 'powerEdit',
  components: { commi, acti, standardA, standardB, sell, promoteA, promoteB, promoAllow },
  data () {
    //这里存放数据
    return {
      loading: false,
      activeName: "acti",
      active: "commi",
      tabList: [
        { label: '分润配置', name: 'commi', components: 'commi', exist: false },
        { label: '激活奖励', name: 'acti', components: 'acti', exist: false },
        { label: '激活津贴', name: 'sellB', components: 'sell', exist: false },
        { label: '达标奖励', name: 'promB', components: 'standardB', exist: false },
        { label: '达标津贴', name: 'promA', components: 'standardA', exist: false },
        { label: '推广奖励', name: 'qualib', components: 'promoteB', exist: false },
        { label: '推广津贴', name: 'promoAllow', components: 'promoAllow', exist: false },
        { label: '管理津贴', name: 'qualiA', components: 'promoteA', exist: false },
      ]
    };
  },
  props: ['RoleId', 'IdentityId'],
  //监听属性 类似于data概念
  computed: {
    commiCacal () {
      return this.tabList[0].exist
    },
    powerCacal () {
      let exist = false
      for (let i = 1; i < this.tabList.length; i++) {
        let iexist = this.tabList[i].exist
        if (iexist) {
          exist = iexist
        }
      }
      return exist
    },
    listCacal () {
      let list = this.$deepClone(this.tabList)
      list.shift()
      list = list.filter(item => item.exist == true)
      return list
    }
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handleClick (tab, event) {

    },
    async GetCorrListFun () {
      let role = this.IdentityId
      this.loading = true
      let { Data } = await GetCorrList({ IsPaging: false, Id: role })
      Data.forEach(element => {
        if (element.TacticsName == '激活奖励' || element.TacticsName == '激活扣款') {
          this.tabList[1].exist = true
        }
        this.tabList.forEach(item => {
          if (element.TacticsName == item.label) {
            item.exist = true
          }
        })
      });
      setTimeout(() => {
        this.loading = false
      }, 800)


    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.GetCorrListFun().catch(er => { this.loading = false })
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
//@import url(); 引入公共css类
<style  scoped>
</style>